<template>
	<view class="heroIllustratedBooksDetails">
		<!-- 英雄图像和名称定位 -->
		<view class="heroTop">
			<view class="heroImg">
				<img src="../../../static/image/introductionImage/ak.jpg" alt="">
			</view>
			<view class="heroName">
				<view class="name">
					阿珂
				</view>
				<view class="positioning">
					刺客/战士
				</view>
			</view>
		</view>
		<!-- 技能出装 -->
		<view class="skillEquip">
			<view class="title">
				技能出装
			</view>
			<!-- 分割线 -->
			<view class="line"></view>
			<!-- 技能 -->
			<view class="skill">
				<view class="skillTitle">
					技能

				</view>

				<view class="skillInfo">
					主一辅二，有大点大
				</view>
			</view>
			<!-- 出装 -->
			<view class="equip">
				<view class="equipTitle">
					出装

				</view>

				<view class="equipInfo">
					全区第一阿珂常用出装
				</view>
			</view>
			<!-- 装备图片 -->
			<view class="equipImages">
				<img src="../../../static/image/introductionImage/zb.jpg" alt="">
				<img src="../../../static/image/introductionImage/zb.jpg" alt="">
				<img src="../../../static/image/introductionImage/zb.jpg" alt="">
				<img src="../../../static/image/introductionImage/zb.jpg" alt="">
				<img src="../../../static/image/introductionImage/zb.jpg" alt="">
				<img src="../../../static/image/introductionImage/zb.jpg" alt="">
				<img src="../../../static/image/introductionImage/zb.jpg" alt="">
			</view>
			<!-- 铭文 -->
			<view class="inscription">
				<view class="inscriptionTitle">
					铭文

				</view>

				<view class="inscriptionInfo">
					排名前100玩家的常用铭文
				</view>
			</view>
			<view class="line line_left">

			</view>
			<!-- 更多详解 -->
			<view class="moreDetaileds">
				<view class="moreTitle">
					更多详解
				</view>
				<uni-icons custom-prefix="iconfont" type="icon-xiangyoujiantou" size="10"></uni-icons>
			</view>
		</view>
		<!-- 大神攻略 -->
		<view class="godIntroduction">
			<view class="godTitle">
				大神攻略
			</view>
			<!-- 大神攻略信息 -->
			<view :style="{paddingBottom:index == godIllustratedBooksDetails.length-1 ? '14px' :''}"
				v-for="(item,index) in godIllustratedBooksDetails" class="godIntroductionInfo">
				<!-- 分割线 -->
				<view v-if="index != 0" class="line">

				</view>
				<view class="title">
					{{item.title}}
				</view>
				<view class="info">
					{{item.info}}
				</view>
				<view class="name_date_up">
					<view class="name_date">
						<view class="name">
							{{item.godName}}
						</view>
						<view class="date">
							{{item.date}}
						</view>
					</view>
					<view style="margin-right: 12px;" class="up">
						<uni-icons color="#ccc" custom-prefix="iconfont" type="icon-dianzan_kuai" size="10"></uni-icons>
						<span style="color: #ccc;font-size: 10px;margin-left: 3px;"> {{item.upNum}}</span>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import heroIllustratedBooksDetailsData from '../../../mockData/introductionData/heroIllustratedBooksDetails.js'
	export default {
		data() {

			return {
				// 英雄数据
				heroData: null,
				// 大神攻略数据
				godIllustratedBooksDetails: heroIllustratedBooksDetailsData.godIllustratedBooksDetails
			}
		},
		onUnload() {
			console.log('onUnload')
		},
		onLoad(option) {
			const eventChannel = this.getOpenerEventChannel();
			// eventChannel.emit('acceptDataFromOpenedPage', {
			// 	a: 1,
			// 	b: 2,
			// 	c: 'acceptDataFromOpenedPage'
			// });
			// eventChannel.emit('someEvent', {
			// 	a: 3,
			// 	b: 4,
			// 	c: 'someEvent'
			// });
			eventChannel.on('acceptDataFromOpenerPage', function(data) {
				console.log(data, '接受的数据')
				this.heroData = data
			})
		},
	}
</script>

<style lang="scss" scoped>
	.heroIllustratedBooksDetails {
		background-color: #e8e8e8;
		height: 100%;

		.heroTop {
			background-color: #fff;
			display: flex;
			padding: 12px 12px;

			.heroImg {
				img {
					width: 44px;
					height: 44px;
				}
			}

			.heroName {
				font-size: 14px;
				font-weight: 600;
				margin-left: 10px;

				.name {
					margin-top: 2px;
				}

				.positioning {
					font-size: 14px;
					color: #ccc;
					margin-top: 12px;
				}
			}

		}

		.skillEquip {
			margin-top: 6px;
			background-color: #fff;

			.title {
				font-size: 14px;
				padding: 14px 12px;
			}

			.line {
				height: 1px;
				background-color: #ebebeb;
				margin-bottom: 8px;
			}

			.line_left {
				margin: 15px 0 0 12px;
			}

			.skill {
				font-size: 14px;
				display: flex;
				padding: 14px 12px;

				.skillTitle {
					color: #e6e6e6;
					margin-right: 10px;
				}

			}

			.equip {
				font-size: 14px;
				display: flex;
				padding: 14px 12px;

				.equipTitle {
					color: #e6e6e6;
					margin-right: 10px;
				}

			}

			.equipImages {
				display: flex;
				flex-wrap: wrap;
				padding: 8px 0;
				padding-left: 40px;


				img {
					border-radius: 50%;
					width: 35px;
					height: 35px;
					margin-right: 3px;
				}
			}

			.inscription {
				font-size: 14px;
				display: flex;
				padding: 14px 12px;

				.inscriptionTitle {
					color: #e6e6e6;
					margin-right: 10px;
				}

			}

			.moreDetaileds {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px 12px;

				.moreTitle {
					font-size: 14px;
				}
			}
		}

		.godIntroduction {
			background-color: #fff;
			margin-top: 6px;

			.line {
				height: 1px;
				background-color: #ebebeb;
				margin-bottom: 12px;
			}

			.godTitle {
				font-size: 14px;
				padding: 14px 12px;
				border-bottom: 1px solid #ebebeb;
			}

			.godIntroductionInfo {
				padding: 14px 12px;
				padding-right: 0;
				padding-bottom: 0px;
				font-size: 14px;

				.info {
					color: #ccc;
					margin-top: 12px;
				}

				.name_date_up {
					margin-top: 24px;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.name_date {
						display: flex;
						align-items: center;
					}

					.name,
					.date {
						color: #ccc;
					}

					.name {
						margin-right: 8px;
					}



				}

			}
		}
	}
</style>